<template>
  <div class="d-flex flex-column flex-root bg-white">
			<div class="d-flex flex-column flex-column-fluid bgi-position-y-bottom position-x-center bgi-no-repeat bgi-size-contain bgi-attachment-fixed" :style="{ backgroundImage: `url(${backgroundImage})` }">
				<div class="d-flex flex-center flex-column flex-column-fluid p-10 pb-lg-20">
					<a href="#" class="mb-12">
						<img alt="Logo" src="media/logos/logo01.svg" class="h-40px" />
					</a>
					<!-- <div class="login-form login-signin"> -->
          <div class="w-lg-500px bg-body rounded shadow-sm p-10 p-lg-15 mx-auto">
						<!--begin::Form-->
						<form class="form w-100" 
                novalidate="novalidate"               
                id="kt_login_signin_form"       
                @submit.stop.prevent="login()">
							<div class="text-center mb-10">
								<h1 class="text-dark mb-3">小诗科技BPM-2.0平台...</h1>
								<!-- <div class="text-gray-400 fw-bold fs-4">
                  <span class="text-muted font-weight-bold font-size-h4">输入时，请注意周边环境。</span>
								</div> -->
							</div>
							<div class="fv-row mb-10">
                <label class="font-size-h6 font-weight-bolder text-dark">账号</label>
								<!--begin::Input-->
                <div id="example-input-group-1" label="" label-for="example-input-1">
                    <input class="form-control form-control-solid h-auto py-7 px-6 rounded-lg" 
                            type="text" 
                            name="account" 
                            ref="account"  
                            v-model="form.account" />
                </div>
							</div>
							<div class="fv-row mb-10">
								<div class="d-flex flex-stack mb-2">
									<label class="font-size-h6 font-weight-bolder text-dark pt-5">密码</label>
								</div>
								<div id="example-input-group-2" label="" label-for="example-input-2" >
                    <input
                      class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                      type="password"
                      name="password"
                      ref="password"
                      v-model="form.password"                   
                      autocomplete="off"/>
                  </div>
								<!--end::Input-->
							</div>
							<!--end::Input group-->
              <div class="fv-row mb-10">
								<!--begin::Label-->
                <label class="font-size-h6 font-weight-bolder text-dark">验证码</label>
								<!--end::Label-->
								<!--begin::Input-->
                <div class="row">
                    <div class="col-sm-6">
                      <input
                          class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                          type="text"
                          v-model="form.validateCode"
                          name="validateCode"
                          ref="validateCode"
                        />
                    </div>
                    <div class="col-sm-2">                      
                      <img :src="form.validImage" alt="" class="h-30px"> 
                      <b-link href="javascript:void(0)" @click="initValidate">换一张</b-link>
                    </div>     
                  </div>
								<!--end::Input-->
							</div>
							<!--begin::Actions-->
							<div class="text-center">
								<!--begin::Submit button-->
                <button fab x-large dark class="btn btn-lg btn-primary w-100 mb-5" ref="kt_login_signin_submit">登录</button>
								<!--end::Submit button-->
								<!-- <div class="text-center text-muted text-uppercase fw-bolder mb-5">or</div>
								<a href="#" class="btn btn-flex flex-center btn-light btn-lg w-100 mb-5">
								<img alt="Logo" src="media/svg/logos/google-icon.svg" class="h-20px me-3" />Google</a>
								<a href="#" class="btn btn-flex flex-center btn-light btn-lg w-100 mb-5">
								<img alt="Logo" src="media/svg/logos/facebook-3.svg" class="h-20px me-3" />Facebook</a>
								<a href="#" class="btn btn-flex flex-center btn-light btn-lg w-100">
								<img alt="Logo" src="media/svg/logos/apple-black.svg" class="h-20px me-3" />Apple</a> -->
							</div>
							<!--end::Actions-->
						</form>
						<!--end::Form-->
					</div>
					<!--end::Wrapper-->
				</div>
				<!--end::Content-->
				<!--begin::Footer-->
				<div class="d-flex flex-center flex-column-auto p-10">
					<!--begin::Links-->
					<div class="d-flex align-items-center fw-bold fs-6">
						<a href="https://gitee.com/jehc" class="text-muted text-hover-primary px-2">关于我们</a>
						<a href="https://gitee.com/jehc" class="text-muted text-hover-primary px-2">ICP备案</a>
						<a href="https://gitee.com/jehc" class="text-muted text-hover-primary px-2">公司信息</a>
					</div>
					<!--end::Links-->
				</div>
				<!--end::Footer-->
			</div>
		</div>
		<!--end::Main-->
  </template>
  
  <!-- 加载登录自定义页面样式 -->
  <style lang="scss">
  .bgi-attachment-fixed{
    background-attachment: fixed;
  }
  </style>
  <script>
  import KTUtil from "@/assets/js/components/util";
  import apiUtil from "@/core/util/apiUtil.js";  
  import { handleAlert,setLocalItem,getLocalItem} from "@/core/util/jehcUtil.js";
  import Router from "@/router.js";
  export default {
    name: "login",
    data() {
      return {      
        state: "signin",
        form: {
          account: "",
          password: "",
          validateCode: "",
          validImage:""
        }
      };
    },
    computed: {
      backgroundImage() {
        return (
          process.env.BASE_URL + "media/illustrations/sketchy-1/14.png"
        );
      }
    },
    mounted() {
        this.initValidate();//初始化加载验证码
    },    
    methods: {
      showForm(form) {
        this.state = form;
        var form_name = "kt_login_" + form + "_form";
        KTUtil.animateClass(
          KTUtil.getById(form_name),
          "animate__animated animate__backInUp"
        );
      },
      initValidate(){
        this.initValidateCode().then(data=>{//验证码
            this.form.validImage =String(data)
          })
      },
      initValidateCode() {
        let validImage  = ''
        return new Promise((resolve)=>{    
            apiUtil.query(process.env.VUE_APP_OAUTH_API+"/JSessionId")
              .then(({ data }) => {             
                setLocalItem("JEHC-SESSION-ID", data.data);
                validImage = process.env.VUE_APP_OAUTH_API+"/verify?date="+new Date().getTime()+"&sessionId="+data.data;
                resolve(validImage)
            })
        })
      },
      login() {     
        let account = this.form.account;
        let password = this.form.password;
        let validateCode = this.form.validateCode;
        if('' === account){
          handleAlert("请输入账号", "warning", 3);
          this.$refs.account.focus()
          return false;
        }
        if('' === password){
          handleAlert("请输入密码", "warning", 3);
          this.$refs.password.focus()
          return false;
        }
        if('' === validateCode){
          handleAlert("请输入验证码", "warning", 1);
          this.$refs.validateCode.focus()
          return false;
        }
        // 设置提交按钮提交时样式
        const submitButton = this.$refs["kt_login_signin_submit"];
        submitButton.classList.add("spinner", "spinner-light", "spinner-right");            
        let param = { account: account, password: password, validateCode: validateCode };//组装参数
        apiUtil.post(process.env.VUE_APP_OAUTH_API+"/login", param).then(({ data }) => {// 发送登录请求
          if(data.success == false) {
            handleAlert(data.message, "error", 3);
            //移除登录按钮样式
            submitButton.classList.remove("spinner","spinner-light","spinner-right");              
            //刷新验证码
            this.initValidate();
          }else{
            setLocalItem("token", data.data);
            // this.$router.push({ path: "/dashboard" })
            const JEHC_ROUTER_NEED_LOAD = "JEHC_ROUTER_NEED_LOAD"; 
            setLocalItem(JEHC_ROUTER_NEED_LOAD, 1);
            this.$router.push("/dashboard" );
          }          
        }).catch(({ response }) => {
          handleAlert("登录失败", "error", 3);
          //移除登录按钮样式
          submitButton.classList.remove(
            "spinner",
            "spinner-light",
            "spinner-right"
          );    
          //刷新验证码
          this.initValidate();
        });
        return false;
      }
    }
  };
  </script>
  